import { pageViewAPI } from "../../apis/page-view";
import { useEffect, useState } from "react";
import { Table } from "antd";

const PagePerform = () => {
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pager, setPager] = useState({
    pageSize: 10,
    pageIndex: 1,
    total: 0
  });

  useEffect(() => {
    getTableData();
  }, [pager.pageIndex])

  function getTableData() {
    pageViewAPI.list({
      pageSize: pager.pageSize,
      pageIndex: pager.pageIndex,
      start_time: 1620571847017,
      end_time: 1624891847017
    }).then((res: any) => {
      if(res && res.success) {
        setTableData(res.data.list);
        setPager({
          ...pager,
          total: res.data.total
        })
      }
    })
  }

  const columns = [
    {
      title: '页面地址',
      dataIndex: 'page_url',
      key: 'page_url',
      ellipsis: true,
      width: "30%"
    },
    {
      title: '访问次数',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '页面标题',
      dataIndex: 'page_title',
      key: 'page_title',
    },
    {
      title: '影响用户',
      dataIndex: 'user_count',
      key: 'user_count',
    },
  ]

  return (
    <div>
      <Table
        // onChange={onChange}
        rowKey={ "id" }
        bordered
        columns={ columns }
        loading={ loading }
        size={"middle"}
        dataSource={ tableData }
        pagination={{
          showQuickJumper: false,
          showTotal: () => `共 ${ pager.total } 条`,
          pageSize: pager.pageSize,
          total: pager.total,
          current: pager.pageIndex,
          onChange: (v) => setPager({
            ...pager,
            pageIndex: v,
          })
        }}
      />
    </div>
  )
}

export default PagePerform